<div id="payment" class="row print-area" ng-show="payment.PaymentStatus === 1">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <span>{{ payment.TransactionNumber }}</span>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <div class="pull-right text-center logo-receipt">
          <h3>I&nbsp/&nbspA&nbsp/&nbspL&nbsp/&nbspF</h3>
          <small>Education for Development</small>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-right">
        <b>Jl Raya Sesetan 190</b>
        <br>
        <b>Denpasar - Bali 80223 Indonesia</b>
        <br>
        <b>Tel: + 62 - 361-225243; Fax: + 62 - 361-263509</b>
        <br>
        <b>ialfbali@ialf.edu | www.ialf.edu</b>
      </div>
      <!-- <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <b>No:</b>&nbsp{{ payment.TransactionNumber }}
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <b>Date:</b>&nbsp{{ payment.PaymentDate | date: 'dd/MM/yyyy' }}

      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <b>Staff:</b>&nbsp{{ (payment.Staff) ? payment.Staff.Name : '-' }}

      </div> -->
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <span>Date: {{ payment.PaymentDate | date: 'dd/MM/yyyy' }}</span>
      </div>
    </div>
  </div>
  <table class="receipt-table">
    <thead>
      <tr>
        <th class="text-center" colspan="6">Receipt</th>
      </tr>
      <tr>
        <th class="text-center" colspan="2">Student</th>
        <th class="text-center">Item</th>
        <th class="text-center">Qty</th>
        <!-- <th class="text-center">Discount</th> -->
        <th class="text-center" colspan="2">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="invoice in payment.Invoices">
        <td rowspan="{{ invoice.StudentDiscounts.length+2 }}">{{ $index+1 }}</td>
        <td rowspan="{{ invoice.StudentDiscounts.length+2 }}">
          <span ng-if="invoice.InvoiceType === 0">{{ invoice.PlacementTest.Student.FullName }}</span>
          <span ng-if="invoice.InvoiceType === 1">{{ invoice.Enrollment.Student.FullName }}</span>
          <span ng-if="invoice.InvoiceType === 2">{{ invoice.MakeUpTest.Enrollment.Student.FullName }}</span>
          <span ng-if="invoice.InvoiceType === 3">{{ invoice.Refund.Enrollment.Student.FullName }}</span>
          <span ng-if="invoice.InvoiceType === 4">{{ invoice.Enrollment.Student.FullName }}</span>
          <br>
          <span ng-if="invoice.InvoiceType === 0">{{ invoice.PlacementTest.Student.SID }}</span>
          <span ng-if="invoice.InvoiceType === 1">{{ invoice.Enrollment.Student.SID }}</span>
          <span ng-if="invoice.InvoiceType === 2">{{ invoice.MakeUpTest.Enrollment.Student.SID }}</span>
          <span ng-if="invoice.InvoiceType === 3">{{ invoice.Refund.Enrollment.Student.SID }}</span>
          <span ng-if="invoice.InvoiceType === 4">{{ invoice.Enrollment.Student.SID }}</span>
        </td>
        <td>
          <span ng-if="invoice.InvoiceType === 0">PT {{ invoice.PlacementTest.DateTime | date:'medium' }}</span>
          <span ng-if="invoice.InvoiceType === 1">{{ invoice.Enrollment.CourseSchedule.CourseName }}</span>
          <span ng-if="invoice.InvoiceType === 2"><strong>{{ MakeUpTestTypes[invoice.MakeUpTest.Type].Label }}</strong> {{ invoice.MakeUpTest.MakeUpTestSchedule.DateTime | date:'medium'  }}</span>
          <span ng-if="invoice.InvoiceType === 3">{{ invoice.Refund.Enrollment.CourseSchedule.CourseName }}</span>
          <span ng-if="invoice.InvoiceType === 4">{{ invoice.Enrollment.CourseSchedule.CourseName }}</span>
        </td>
        <td class="text-center">1</td>
        <td class="text-right">Rp</td>
        <td class="text-right">{{ invoice.TotalAmount | currency: '' }}&nbsp</td>
      </tr>
      <tr ng-repeat-end ng-repeat-start="discount in invoice.StudentDiscounts">
        <td>{{ discount.Number }} {{ discount.SourceReference }}</td>
        <td class="text-center">1</td>
        <td class="text-right">Rp</td>
        <td class="text-right">({{ labelDiscount(discount, invoice) | currency: '' }})</td>
      </tr>
      <tr class="end-sub" ng-repeat-end>
        <td>Total Amount</td>
        <td></td>
        <td class="text-right">Rp</td>
        <td class="text-right">{{ (invoice.TotalAmount - invoice.TotalDiscount) | currency: '' }}&nbsp</td>
      </tr>

      <tr>
        <th colspan="4"></th>
        <th colspan="2"><hr></th>
      </tr>
      <tr class="end-sub">
        <!-- <td colspan="2" class="text-left"><b>Payment Methods:</b> <span ng-repeat="paymentMethod in PaymentMethodsArray">{{ PaymentMethods[paymentMethod].Label }} {{ ($index < PaymentMethodsArray.length-1) ? ', ' : '' }}</span></td> -->
        <th colspan="4" class="text-right">Total</th>
        <th class="text-right">Rp</th>
        <th class="text-right">{{ (payment.TotalAmount - payment.TotalDiscount) | currency: '' }}&nbsp</th>
      </tr>
      <tr></tr>
      <tr>
        <th colspan="4" class="text-right">Payment</th>
        <th colspan="2"></th>
      </tr>
      <tr>
        <td colspan="4" class="text-right">Cash</td>
        <td class="text-right">Rp</td>
        <td class="text-right">({{ (payment.CashAmount > 0) ? payment.CashAmount : 0 | currency: '' }})</td>
      </tr>
      <tr ng-repeat="transfer in payment.BankTransfers">
        <td colspan="4" class="text-right">Bank Transfer - {{ transfer.RefNumber }}</td>
        <td class="text-right">Rp</td>
        <td class="text-right">({{ transfer.Amount | currency: '' }})</td>
      </tr>
      <tr ng-repeat="cc in payment.CreditCardPayments">
        <td colspan="4" class="text-right">CC - {{ cc.CardNumber }}</td>
        <td class="text-right">Rp</td>
        <td class="text-right">({{ cc.Amount | currency: '' }})</td>
      </tr>

      <tr>
        <th colspan="4"></th>
        <th colspan="2"><hr></th>
      </tr>
      <tr>
        <th colspan="4" class="text-right">Change</th>
        <th class="text-right">Rp</th>
        <th class="text-right">{{ (payment.Change) | currency: '' }}&nbsp</th>
      </tr>
      <tr>
        <th colspan="6" class="text-right"><small><i>*{{ (payment.TotalAmount - newPayment.TotalDiscount) | inWords }} rupiah</i></small></th>
      </tr>

    </tbody>
  </table>
</div>

<div class="row print-area" ng-show="payment.PaymentStatus === 2">
  <div class="col-sm-12">
    <h4>Copy 1</h4>
    <div class="form-group">
      <label for="payer">Received From</label>
      <span>{{ payment.ReceivedFrom }}</span>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h4 class="panel-title">Payment #{{ payment.TransactionNumber }}</h4>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-condensed">
          <thead>
            <tr>
              <th></th>
              <th>Item</th>
              <th>Discount</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="invoice in payment.Invoices">
              <td></td>
              <td>
                <dl>
                  <dt>{{ invoice.Student.FullName }}</dt>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 0">Placement Test</dd>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 1">Enrollment</dd>
                </dl>
              </td>
              <td><span class="form-control">{{ invoice.TotalDiscount }}</span></td>
              <td><span class="form-control" style="text-align: right;">{{ invoice.TotalAmount | currency: 'Rp' }}</span></td>
            </tr>
          </tbody>
          <tfoot>
            <th colspan="3">Total Amount</th>
            <th><span class="form-control" style="text-align: right;">{{ payment.TotalAmount | currency: 'Rp' }}</span></th>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="form-group">
      <h4>Transfer To</h4>
      <dl class="dl-horizontal">
        <dt>Bank</dt>
        <dd>Mandiri</dd>
        <dt>Swift Code</dt>
        <dd>12345AHSD</dd>
        <dt>Name</dt>
        <dd>John Smith</dd>
        <dt>Account</dt>
        <dd>123456789</dd>
      </dl>
    </div>
  </div>
</div>

<div class="row print-area" ng-show="payment.PaymentStatus === 2">
  <div class="col-sm-12">
    <h4>Copy 2</h4>
    <div class="form-group">
      <label for="payer">Received From</label>
      <span class="form-control">{{ payment.ReceivedFrom }}</span>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h4 class="panel-title">Payment #{{ payment.TransactionNumber }}</h4>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-condensed">
          <thead>
            <tr>
              <th></th>
              <th>Item</th>
              <th>Discount</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="invoice in payment.Invoices">
              <td></td>
              <td>
                <dl>
                  <dt>{{ invoice.Student.FullName }}</dt>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 0">Placement Test</dd>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 1">Enrollment</dd>
                </dl>
              </td>
              <td><span class="form-control">{{ invoice.TotalDiscount }}</span></td>
              <td><span class="form-control" style="text-align: right;">{{ invoice.TotalAmount | currency: 'Rp' }}</span></td>
            </tr>
          </tbody>
          <tfoot>
            <th colspan="3">Total Amount</th>
            <th><span class="form-control" style="text-align: right;">{{ payment.TotalAmount | currency: 'Rp' }}</span></th>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="form-group">
      <h4>Transfer To</h4>
      <dl class="dl-horizontal">
        <dt>Bank</dt>
        <dd>Mandiri</dd>
        <dt>Swift Code</dt>
        <dd>12345AHSD</dd>
        <dt>Name</dt>
        <dd>John Smith</dd>
        <dt>Account</dt>
        <dd>123456789</dd>
      </dl>
    </div>
  </div>
</div>

<div class="row print-area" ng-show="payment.PaymentStatus === 2">
  <div class="col-sm-12">
    <h4>Copy 3</h4>
    <div class="form-group">
      <label for="payer">Received From</label>
      <span class="form-control">{{ payment.ReceivedFrom }}</span>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h4 class="panel-title">Payment #{{ payment.TransactionNumber }}</h4>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-condensed">
          <thead>
            <tr>
              <th></th>
              <th>Item</th>
              <th>Discount</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="invoice in payment.Invoices">
              <td></td>
              <td>
                <dl>
                  <dt>{{ invoice.Student.FullName }}</dt>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 0">Placement Test</dd>
                  <dd class="text-muted" ng-if="invoice.InvoiceType === 1">Enrollment</dd>
                </dl>
              </td>
              <td><span class="form-control">{{ invoice.TotalDiscount }}</span></td>
              <td><span class="form-control" style="text-align: right;">{{ invoice.TotalAmount | currency: 'Rp' }}</span></td>
            </tr>
          </tbody>
          <tfoot>
            <th colspan="3">Total Amount</th>
            <th><span class="form-control" style="text-align: right;">{{ payment.TotalAmount | currency: 'Rp' }}</span></th>
          </tfoot>
        </table>
      </div>
    </div>

    <div class="form-group">
      <h4>Transfer To</h4>
      <dl class="dl-horizontal">
        <dt>Bank</dt>
        <dd>Mandiri</dd>
        <dt>Swift Code</dt>
        <dd>12345AHSD</dd>
        <dt>Name</dt>
        <dd>John Smith</dd>
        <dt>Account</dt>
        <dd>123456789</dd>
      </dl>
    </div>
  </div>
</div>